<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: LiYansheng
 * @Date: 2022-03-31 21:02:44
 * @LastEditors: CoderXZ
 * @LastEditTime: 2022-04-06 22:22:51
-->
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-likefill"></i> 就业意向
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <el-row>
        <el-col :span="3" :offset="21">
          <!-- 意向最多为三个 -->
          <el-button type="primary" @click="openAdd">新增意向</el-button>
        </el-col>
      </el-row>

      <!-- 弹窗 -->
      <el-dialog title="新增意向" :visible.sync="dialogVisible1" width="30%">
        <!-- 表单 -->
        <el-form :model="intent" label-width="25%" :rules="rules" ref="intent">
          <el-form-item label="城市：" prop="city">
            <el-select v-model="intent.city" placeholder="省份..." @change="getOption">
              <el-option
                :label="a.name"
                :value="a.name"
                v-for="(a, index) in areaOption"
                :key="index"
              ></el-option>
            </el-select>
            <el-select v-model="intent.urban" placeholder="地区...">
              <el-option
                :label="a.name"
                :value="a.name"
                v-for="(a, index) in urbanOption"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="薪资：" prop="salary">
            <el-input v-model="intent.salary" placeholder="请输入意向薪资..."></el-input>
          </el-form-item>
          <el-form-item label="行业：" prop="industry">
            <el-select v-model="intent.industry" placeholder="点击选择">
              <el-option
                :label="i.name"
                :value="i.name"
                v-for="(i, index) in industryOption"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位：" prop="post">
            <el-input v-model="intent.post" placeholder="请输入意向岗位..."></el-input>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input
              v-model="intent.remark"
              placeholder="请输入意向备注..."
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveAdd">确定添加 </el-button>
        </span>
      </el-dialog>

      <!-- 编辑 -->
      <el-dialog title="编辑意向" :visible.sync="dialogVisible2" width="30%">
        <!-- 表单 -->
        <el-form :model="intent" label-width="25%" ref="intent">
          <el-form-item label="城市：">
            <el-select v-model="intent.city" placeholder="省份..." @change="getOption">
              <el-option
                :label="a.name"
                :value="a.name"
                v-for="(a, index) in areaOption"
                :key="index"
              ></el-option>
            </el-select>
            <el-select v-model="intent.urban" placeholder="地区...">
              <el-option
                :label="a.name"
                :value="a.name"
                v-for="(a, index) in urbanOption"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="薪资：">
            <el-input v-model="intent.salary" placeholder="请输入意向薪资..."></el-input>
          </el-form-item>
          <el-form-item label="行业：">
            <el-select v-model="intent.industry" placeholder="点击选择">
              <el-option
                :label="i.name"
                :value="i.name"
                v-for="(i, index) in industryOption"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位：">
            <el-input v-model="intent.post" placeholder="请输入意向岗位..."></el-input>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input
              v-model="intent.remark"
              placeholder="请输入意向备注..."
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确定修改 </el-button>
        </span>
      </el-dialog>

      <el-row>
        <el-col :span="24">
          <el-card v-for="(intent1, index) in intents" :key="index">
            <el-divider>意向{{ ++index }}</el-divider>
            <el-tag type="success">城市：</el-tag>{{ intent1.city }} <br />
            <el-tag>薪资：</el-tag>{{ intent1.salary }} <br />
            <el-tag type="success">行业：</el-tag>{{ intent1.industry }} <br />
            <el-tag type="warning">岗位：</el-tag>{{ intent1.post }} <br />
            <el-tag>备注：</el-tag>{{ intent1.remark }} <br />
            <el-divider content-position="right">
              <el-button type="primary" plain @click="edit(intent1)">编辑</el-button>
              <el-popconfirm title="确定要删除吗？" @confirm="del(intent1.id)">
                <el-button type="danger" plain slot="reference">删除</el-button>
              </el-popconfirm>
            </el-divider>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { areas } from "../../../public/area.json";
import { list } from "../../../public/industry.json";
import { searchById, add, del, update } from "../../api/intent.js";
export default {
  created() {
    this.getData();
  },
  methods: {
    edit(intent) {
      this.intent = intent;
      this.dialogVisible2 = true;
    },
    getData() {
      searchById()
        .then((result) => {
          this.intents = result.data.list;
          this.count = result.data.count;
        })
        .catch((err) => {});
    },
    del(id) {
      del(id)
        .then((result) => {
          if (result.status == "200") {
            this.$message.success("删除成功");
            this.getData();
          }
        })
        .catch((err) => {});
    },
    saveAdd() {
      this.$refs["intent"].validate((valid) => {
        if (valid) {
          add(this.intent)
            .then((result) => {
              if (result.status == "200") {
                this.$message.success("添加成功");
                dialogVisible1 = false;
                this.getData();
              }
            })
            .catch((err) => {});
        } else {
          return false;
        }
      });
    },
    getOption(val) {
      this.areaOption.forEach((element) => {
        if (element.name == val) {
          this.urbanOption = element.city;
        }
      });
    },
    openAdd() {
      if (this.count >= 3) {
        this.$message.error("最多填写3个意向");
      } else {
        this.dialogVisible1 = true;
      }
    },

    saveEdit() {
      update(this.intent)
        .then((result) => {
          if (result.status == "200") {
            this.$message.success("修改成功！");
            this.dialogVisible2 = false;
            this.getData();
          }
        })
        .catch((err) => {});
    },
  },
  data() {
    return {
      dialogVisible1: false,
      dialogVisible2: false,
      intent: {
        id: "",
        city: "",
        salary: "",
        industry: "",
        remark: "",
        urban: "",
      },
      intents: [],
      industryOption: list,
      count: 0,
      areaOption: areas,
      urbanOption: null,
      rules: {
        city: [{ required: true, message: "请输入", trigger: "change" }],
        salary: [{ required: true, message: "请输入", trigger: "blur" }],
        industry: [{ required: true, message: "请输入", trigger: "change" }],
        post: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
};
</script>

<style>
.el-tag {
  margin-top: 4px;
}
</style>
